import React from 'react';
import { Button, Select } from 'antd';
import { VtxModal, VtxMap } from 'vtx-ui';
import styles from './Timer.less';
import { NAME_SPACE } from './config';
import moment from 'moment'

const Option = Select.Option

class Index extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      time: 60000
    }
    this.changeTime = this.changeTime.bind(this)
    this.timerStart = null;
    this.timer = null;
  }

  componentDidMount(){
    const {dispatch} = this.props
    this.timerStart = setInterval(() => {
        // console.log('完美输出')
        dispatch({
          type: `${NAME_SPACE}/getList`,
          payload: {type: 'search'}
        })
    }, this.state.time)
  }

  componentWillUpdate(){
    if(this.timerStart){
      clearInterval(this.timerStart);
      this.timerStart = null
    }
    if(this.timer){
      clearInterval(this.timer);
      this.timer = null
    }
  }

  componentDidUpdate(){
    const {dispatch} = this.props
    this.timer = setInterval(() => {
        // console.log('改变后的完美输出')
        dispatch({
          type: `${NAME_SPACE}/getList`,
          payload: {type: 'search'}
        })
    }, this.state.time)
  }

  componentWillUnmount(){
      if(this.timer){
          clearInterval(this.timer);
          this.timer = null
      }
  }

  changeTime(value){
    this.setState({
      time: value
    })
  }

  render(){
    return (
      <div className={styles.normal}>
        <div className={styles.right}>
          <Select
            style={{width: 150}}
            value={this.state.time}
            onChange={(value) => {this.changeTime(value)}}
          >
            <Option value={60000}>1分钟</Option>
            <Option value={30000}>30秒</Option>
          </Select>
          <span className={styles.txt}>刷新频率</span>
        </div>
      </div>
    )
  }
}

export default Index